<template>
	<view class="questionslist-page" @touchmove="move">
		<view class="questionslist-page-header">
			<mynavBar :title="title" :imgurl="imgurl" :gps="gps" :bgcolor="bgColor"></mynavBar>
		</view>
		<view class="questionslist-page-nav">
			<view class="page-nav-left" @click="anychange" :class="headerIndex==5?'nav-left-active':''">
				<span>全部</span>
			</view>
			<view class="page-nav-right">
				<view class="body-header-left" v-for="(item,index) in headersList" :key="item.name"
					:style="item.img?'':'padding: 0 20rpx;'" :class="headerIndex==index?'header-left-active':''"
					@click="headerschange(index)">
					<img :src="headerIndex==index?item.active:item.img" alt="" v-if="item.img"
						:class="index == 2 || index == 4 ? 'header-left-img-css' : 'header-left-img'">
					<span>{{item.name}}</span>
				</view>
			</view>
		</view>
		<u-popup :safe-area-inset-bottom="false" mode="center" :round="20" :show="showtwo" :disabled="true">
			<view class="popularlogin">
				<img :src="queryIconImage('weixinlogo1')" alt="" style="width: 60rpx;height: 60rpx;">
				<p class="popularlogin-text">登录后查看</p>
				<view class="popularlogin-btn">
					<view class="popularlogin-btn-left" @click="loginsubmit">
						<span>授权登录</span>
					</view>
					<view class="popularlogin-btn-left" style="background: #999999;" @click="cancellationbtn">
						<span>取消</span>
					</view>
				</view>
			</view>
		</u-popup>
		<view class="questionslist-page-sort">
			<view class="page-sort-box"
				:class="sortbleam&& headerIndex !==3&&headerIndex!==4?'page-sort-box-active':''">
				<img :src="commentIconImage('sortlogo1')" alt="" class="sort-box-img" @click="sortswitch">
				<span @click="sortswitch">{{sortname}}</span>
				<view class="sort-box-list" v-if="sortbleam && headerIndex !==3&&headerIndex!==4"
					@click="changesort('最新排序')">
					最新排序 </view>
				<view class="sort-box-list" v-if="sortbleam && headerIndex !==3&&headerIndex!==4"
					@click="changesorttwo('最热排序')">
					最热排序 </view>
			</view>
		</view>
		<view class="questionslist-page-content">

			<view class="content-body-midel" v-if="headerIndex == 5">

				<view class="body-midel-content" v-for="(item,inde) in anylist" :key="item.id">
					<!-- <span class="fontColor">{{item.type}}</span> -->
					<popularquestionsCard :popularquestionscontent="item"
						@goquestiondetails="goquestiondetails(item.id)">

						<view class="midel-content-text">


							<span>{{item.title}}</span>

							<img :src="queryIconImage('modelone1')" alt="" class="content-text-img" />
							<img :src="queryIconImage('questondetalogo1')" alt="" class="content-text-img"
								v-if="item.type=='悬赏提问'" />
							<img :src="queryIconImage('modelone2')" alt="" class="content-text-img"
								v-if="item.article_comment.length<1" />

						</view>
					</popularquestionsCard>
					<view class="midel-content-img" v-if="item.article_detail.length>0">
						<view class="content-img-list" v-for="(v,i) in item.article_detail" :key="v.id">
							<!-- <img :src="v.img?.url" alt="" class="content-img-log" v-if="i<3 && v.img"> -->
							<!-- <video :src="v.video.url" class="content-img-video" v-if="i<3 && v.video"></video> -->
						</view>
					</view>
					<!-- <view class="colorType"></view> -->
				</view>

			</view>
			<view class="page-content-body" v-if="headerIndex==0">

				<view class="content-body-list" v-for="(item,index) in popularquestionscontent" :key="item.id">
					<popularquestionsCard :popularquestionscontent="item"
						@goquestiondetails="goquestiondetails(item.id)">
					</popularquestionsCard>
				</view>

			</view>
			<view class="page-content-bodytwotwo" v-if="headerIndex==1">
				<view class="content-body-list" v-for="(item,index) in popularquestionscontentlist" :key="item.id">
					<popularquestionsCard :popularquestionscontent="item"
						@goquestiondetails="goquestiondetails(item.id)">
					</popularquestionsCard>
				</view>

			</view>
			<view class="page-content-bodytwo" v-if="headerIndex==2">
				<view class="content-body-list" v-for="(item,index) in answereddata" :key="item.id">
					<answeredCard :answereddata="item"></answeredCard>
				</view>

			</view>
			<view class="page-content-bodytwo" v-if="headerIndex==3">
				<view class="content-body-list" v-for="(item,index) in newansweredlast" :key="item.id">
					<latestanswerCard :latestanswerdata="item" :index="headerIndex" @lategodetails="lategodetails">
					</latestanswerCard>
				</view>

			</view>
			<view class="page-content-bodytwo" v-if="headerIndex==4">
				<view class="content-body-list" v-for="(item,index) in popularquestionsCardlist" :key="item.id">
					<latestanswerCard :latestanswerdata="item" :index="headerIndex" @lategodetails="lategodetails">
					</latestanswerCard>
				</view>

			</view>
		</view>
		<view class="questionslist-page-bottom">
			<span>{{bootomvalue}}</span>
		</view>
	</view>
</template>

<script>
	import methods from "@/pages/index/methods.js"
	import {
		mapState
	} from 'vuex'
	import {
		Time
	} from "@/utils/timenew.js"
	export default {
		data() {
			return {
				showtwo: false,
				currentPage: 1,
				currentPagefour: 1,
				currentPageone: 1,
				currentPagetwo: 1,
				currentPagethree: 1,
				currentPagefive: 1,
				pageSize: 20,
				answereddata: [],
				popularquestionscontent: [],
				popularquestionscontentlist: [],
				anylist: [],
				gps: '',
				title: '问答',
				imgurl: '../../../static/headerbackground1.png',
				navheight: "80rpx",
				bgColor: 'rgba(165, 42, 42, 0)',
				bootomvalue: "上滑加载更多内容 ↑",
				newansweredlast: [],
				popularquestionsCardlist: [],
				sortname: "最新排序",
				sortbleam: false,
				headerIndex: 0,
				headersList: [{
					name: '热门提问',
				}, {
					name: '公开悬赏',
				}, {
					name: '待回答',
				}, {
					name: '最新回答',
				}, {
					name: '热门回答',
				}]
			};
		},
		computed: {
			...mapState({
				headericon: state => state.remote?.headericon?.data_list ?? [],
				iconList: state => state.remote?.iconList?.data_list ?? [],
			})
		},
		mounted() {
			this.querySections().then(res => {
				this.headersList.map(item => {
					if (item.name == '热门提问') {
						item.img = this.queryIconImage('indexheader1')
						item.active = this.queryIconImage('headeractive1')
					}
					if (item.name == '公开悬赏') {
						item.img = this.queryIconImage('indexheader2')
						item.active = this.queryIconImage('headeractive2')
					}
					if (item.name == '待回答') {
						item.img = this.queryIconImage('indexheader3')
						item.active = this.queryIconImage('headeractive3')
					}
					if (item.name == '最新回答') {
						item.img = this.queryIconImage('indexheader6')
						item.active = this.queryIconImage('headeractive4')
					}
					if (item.name == '热门回答') {
						item.img = this.queryIconImage('indexheader5')
						item.active = this.queryIconImage('headeractive5')
					}
				})
			})
		},
		onLoad() {
			//#ifdef MP-WEIXIN
			let arr = wx.getMenuButtonBoundingClientRect()
			this.gps = arr.top
			console.log("胶囊位置信息", arr);
			//#endif
			this.getData()
		},
		onPageScroll(e) {
			//获取距离顶部距离
			const scrollTop = e.scrollTop;
			console.log("高度：", scrollTop)
			// 根据高度改变样式
			if (scrollTop < 99) {
				this.bgColor = 'rgba(247, 247, 247, 0)'
			} else if (scrollTop >= 99 && scrollTop < 150) {
				this.bgColor = 'rgba(247, 247, 247, 0.5)'
			} else if (scrollTop >= 150) {
				this.bgColor = 'rgba(247, 247, 247, 1)'
			}
		},
		methods: {
			...methods,
			queryIconImage(label, key = "headericon") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			//排序热度
			bubbleSortHeat(list) {
				var len = list.length
				for (let i = 0; i < len; i++) {
					for (let j = 0; j < len - 1 - i; j++) {
						if (list[j].article_heat.length < list[j + 1].article_heat.length) {
							var t = list[j + 1]
							list[j + 1] = list[j]
							list[j] = t
						}
					}
				}
			},
			commentIconImage(label, key = "iconList") {
				return this[key]?.find(res => res?.label == label)?.img?.url;
			},
			lategodetails(val) {
				if (this.headerIndex == 3) {
					let usercoundId = uni.getStorageSync('userInfo').id
					if (usercoundId) {
						console.log("点击", val);
						uni.navigateTo({
							url: `/pages_a/questiondetails/questiondetails?id=${val}`
						})
					} else {
						this.showtwo = true
					}

				}
				if (this.headerIndex == 4) {
					let usercoundId = uni.getStorageSync('userInfo').id
					if (usercoundId) {
						console.log("点击", val);
						uni.navigateTo({
							url: `/pages_a/questiondetails/questiondetails?id=${val}&&name='最热'`
						})
					} else {
						this.showtwo = true
					}

				}

			},
			getData() {
				this.$store.dispatch("remote/query", {
					model: 'article',
					isloading: false,
					limit: this.pageSize,
					offset: (this.currentPage - 1) * this.pageSize,
					field_string: 'id user_user type heat title content price_cny created_at answer_type status article_visits{visit_times} user{id nickname avatar{url}} article_detail{id video{url} img{url}} article_heat{id}',
					order_by: {
						heat: 'desc'
					},
					where: {
						status: {
							_eq: "展示中"
						},
						answer_type: {
							_eq: "公开参与"
						}
					},
				}).then(res => {
					console.log("查询文章列表", res)
					let add = res.data_list
					this.popularquestionscontent = JSON.parse(JSON.stringify(add))
					console.log('popularquestionscontent', this.popularquestionscontent);
				})
			},
			/* 问题详情页 */
			goquestiondetails(val) {

				let usercoundId = uni.getStorageSync('userInfo').id
				if (usercoundId) {
					console.log("点击", val);
					uni.navigateTo({
						url: `/pages_a/questiondetails/questiondetails?id=${val}`
					})
				} else {
					this.showtwo = true
				}

			},
			anychange() {
				this.bootomvalue = '上滑加载更多内容 ↑'
				this.headerIndex = 5
				if (this.anylist?.length < 1) {
					this.$store.dispatch("remote/query", {
						model: 'article',
						isloading: false,
						limit: this.pageSize,
						offset: (this.currentPagefive - 1) * this.pageSize,
						order_by: {
							id: 'desc'
						},
						where: {
							status: {
								_eq: "展示中"
							},
							answer_type: {
								_eq: "公开参与"
							}
						},
						field_string: 'id user_user type heat title content price_cny created_at answer_type status article_detail{id img{url} video{url}} article_visits{visit_times} article_comment{id} user{id nickname avatar{url}}',
					}).then(res => {
						console.log('全部提问', res);
						this.anylist = JSON.parse(JSON.stringify(res.data_list))
						// console.log("1111111111111111111111",this.anylist);
					})
				}

			},
			changeval() {
				console.log(this.headerIndex);
				this.bootomvalue = '上滑加载更多内容 ↑'
				if (this.headerIndex == 1 && this.popularquestionscontentlist?.length < 1) {
					this.$store.dispatch("remote/query", {
						model: 'article',
						isloading: false,
						limit: this.pageSize,
						offset: (this.currentPageone - 1) * this.pageSize,
						field_string: 'id user_user type heat title content price_cny created_at answer_type status article_visits{visit_times} user{id nickname avatar{url}} article_detail{id video{url} img{url}}',
						where: {
							_and: [{
									type: {
										_eq: '悬赏提问'
									}
								}, {
									answer_type: {
										_eq: "公开参与"
									}
								},
								{
									status: {
										_eq: "展示中"
									}
								}
							]
						},

						order: [{
							article_visits: {
								visit_times: 'desc',
							}
							// id: 'desc'
						}],
					}).then(res => {
						console.log("公开悬赏文章列表", res)
						let add = res.data_list.map(v => {
							if (v.heat == null) {
								v.heat = 0
							}
							v.created_at = Time(v.created_at)
							return v
						})
						this.popularquestionscontentlist = JSON.parse(JSON.stringify(add))
					})
				}
				if (this.headerIndex == 2 && this.answereddata?.length < 1) {
					this.$store.dispatch("remote/query", {
						model: 'article',
						isloading: false,
						limit: this.pageSize,
						offset: (this.currentPagetwo - 1) * this.pageSize,
						field_string: 'id user_user heat type title content price_cny created_at answer_type status article_visits{visit_times} article_comment{id} user{id nickname avatar{url}}',
						where: {
							status: {
								_eq: "展示中"
							},
							answer_type: {
								_eq: "公开参与"
							}
						},
					}).then(res => {
						let add = []
						res.data_list.forEach(v => {
							if (v.article_comment.length < 1) {
								if (v.heat == null) {
									v.heat = 0
								}
								add.push(v)
							}
						})
						this.answereddata = add
						console.log("待回答文章列表", this.answereddata)
					})
				}
				if (this.headerIndex == 3 && this.newansweredlast?.length < 1) {
					this.$store.dispatch("remote/query", {
						model: 'article_comment',
						isloading: false,
						order_by: {
							created_at: 'desc'
						},
						where: {
							article_article: {
								_is_null: false
							}
						},
						field_string: 'id content score article_article article{id title article_comment{id user{id nickname } }} collect created_at zanlink article_comment_detail{id  content img{url} video{url}}  user{id nickname avatar{url}}',
						limit: this.pageSize,
						offset: (this.currentPagethree - 1) * this.pageSize,

					}).then(res => {
						let add = res.data_list.map(v => {
							v.created_at = Time(v.created_at)
							return v
						})
						this.newansweredlast = JSON.parse(JSON.stringify(add))
						console.log("最新回答列表", this.newansweredlast)
					})
				}
				if (this.headerIndex == 4 && this.popularquestionsCardlist?.length < 1) {
					this.$store.dispatch("remote/query", {
						model: 'article_comment',
						isloading: false,
						where: {
							article_article: {
								_is_null: false
							}
						},
						limit: this.pageSize,
						offset: (this.currentPagefour - 1) * this.pageSize,
						field_string: 'id content score article_article article{id title article_comment{id user{id nickname } }} collect created_at zanlink article_comment_detail{id  content img{url} video{url}}  user{id nickname avatar{url}}',

					}).then(res => {
						let add = res.data_list.map(v => {
							v.created_at = Time(v.created_at)
							return v
						})
						this.popularquestionsCardlist = JSON.parse(JSON.stringify(add))
						this.popularquestionsCardlist = this.popularquestionsCardlist.sort((a, b) => {
							return b.zanlink - a.zanlink
						})
						console.log("最热回答列表", this.popularquestionsCardlist)
					})
				}
			},
			headerschange(id) {
				this.headerIndex = id
				this.changeval()

			},
			sortswitch() {
				this.sortbleam = this.sortbleam ? false : true
			},
			//跳转到登录页面
			loginsubmit() {
				uni.navigateTo({
					url: `/pages/login/login`
				})
				this.showtwo = false
			},
			cancellationbtn() {
				this.showtwo = false

			},
			changesort(val) {

				this.sortbleam = false
				this.sortname = val
				if (val == '最新排序') {

					this.popularquestionscontent.sort((a, b) => {
						return b.id - a.id
					})
					this.popularquestionscontent = this.popularquestionscontent
					this.popularquestionscontentlist = this.popularquestionscontentlist.sort((a, b) => {
						return b.id - a.id
					})
					this.answereddata = this.answereddata.sort((a, b) => {
						return b.id - a.id
					})
					this.newansweredlast = this.newansweredlast.sort((a, b) => {
						return b.id - a.id
					})
					this.popularquestionsCardlist = this.popularquestionsCardlist.sort((a, b) => {
						return b.id - a.id
					})
					console.log("最新", this.popularquestionscontent);
				}

			},
			changesorttwo(val) {
				this.sortbleam = false
				this.sortname = val
				if (val == '最热排序') {
					this.popularquestionscontent = this.popularquestionscontent.sort((a, b) => {
						return b.heat - a.heat
					})

					this.popularquestionscontentlist = this.popularquestionscontentlist.sort((a, b) => {

						return b.heat - a.heat
					})
					this.answereddata = this.answereddata.sort((a, b) => {
						return b.heat - a.heat
					})
					this.newansweredlast = this.newansweredlast.sort((a, b) => {
						return b.heat - a.heat
					})
					this.popularquestionsCardlist = this.popularquestionsCardlist.sort((a, b) => {
						return b.heat - a.heat
					})
					console.log("最热", this.popularquestionscontent);

				}

			},

		},

		onReachBottom() {
			if (this.headerIndex == 1) {
				this.currentPageone++
				this.$store.dispatch("remote/query", {
					model: 'article',
					isloading: false,
					limit: this.pageSize,
					offset: (this.currentPageone - 1) * this.pageSize,
					field_string: 'id user_user type heat title content price_cny created_at answer_type status article_visits{visit_times} user{id nickname avatar{url}} article_detail{id video{url} img{url}}',
					where: {
						_and: [{
							type: {
								_eq: '悬赏提问'
							}
						}, {
							answer_type: {
								_eq: "公开参与"
							}
						}, {
							status: {
								_eq: "展示中"
							}
						}]
					},
					order: [{
						article_visits: {
							visit_times: 'desc',
						}
						// id: 'desc'
					}],
				}).then(res => {
					console.log("公开悬赏文章列表", res)
					if (res.data_list?.length > 0) {
						let add = res.data_list.map(v => {
							v.created_at = Time(v.created_at)
							if (v.heat == null) {
								v.heat = 0
							}
							return v
						})
						this.popularquestionscontentlist.push(...add)
					} else {
						uni.showLoading({
							title: "没有数据了哦" //为了网络慢，给用户的友好等待提示
						});
						setTimeout(function() {
							uni.hideLoading();
						}, 500);
						this.bootomvalue = '没有数据了哦'
					}

				})
			}
			if (this.headerIndex == 0) {
				this.currentPage++
				this.$store.dispatch("remote/query", {
					model: 'article',
					isloading: false,
					limit: this.pageSize,
					offset: (this.currentPage - 1) * this.pageSize,
					field_string: 'id user_user type heat title content price_cny created_at answer_type status article_visits{visit_times} user{id nickname avatar{url}} article_detail{id video{url} img{url}}',
					order_by: {
						heat: 'desc'
					},
					where: {
						status: {
							_eq: "展示中"
						},
						answer_type: {
							_eq: "公开参与"
						}
					},
				}).then(res => {
					if (res.data_list?.length > 0) {
						console.log("查询文章列表", res)
						let add = res.data_list.map(v => {
							v.created_at = Time(v.created_at)
							return v
						})
						this.popularquestionscontent.push(...add)
					} else {
						uni.showLoading({
							title: "没有数据了哦" //为了网络慢，给用户的友好等待提示
						});
						setTimeout(function() {
							uni.hideLoading();
						}, 500);
						this.bootomvalue = '没有数据了哦'
					}

				})
			}
			if (this.headerIndex == 2) {
				this.currentPagetwo++
				this.$store.dispatch("remote/query", {
					model: 'article',
					isloading: false,
					limit: this.pageSize,
					offset: (this.currentPagetwo - 1) * this.pageSize,
					field_string: 'id user_user type title heat content price_cny created_at answer_type status article_visits{visit_times} article_comment{id} user{id nickname avatar{url}}',
					where: {
						status: {
							_eq: "展示中"
						},
						answer_type: {
							_eq: "公开参与"
						}
					},
				}).then(res => {
					if (res.data_list?.length > 0) {
						let add = []
						res.data_list.forEach(v => {
							if (v.article_comment.length < 1) {
								if (v.heat == null) {
									v.heat = 0
								}
								add.push(v)
							}
						})
						this.answereddata.push(...add)
						console.log("待回答文章列表", this.answereddata)
					} else {
						uni.showLoading({
							title: "没有数据了哦" //为了网络慢，给用户的友好等待提示
						});
						setTimeout(function() {
							uni.hideLoading();
						}, 500);
						this.bootomvalue = '没有数据了哦'
					}

				})

			}
			if (this.headerIndex == 3) {
				this.currentPagethree++
				this.$store.dispatch("remote/query", {
					model: 'article_comment',
					isloading: false,
					order_by: {
						created_at: 'desc'
					},
					where: {
						article_article: {
							_is_null: false
						}
					},
					field_string: 'id content score article_article article{id title article_comment{id user{id nickname } }} collect created_at zanlink article_comment_detail{id  content img{url} video{url}}  user{id nickname avatar{url}}',
					limit: this.pageSize,
					offset: (this.currentPagethree - 1) * this.pageSize,

				}).then(res => {
					if (res.data_list?.length > 0) {
						let add = res.data_list.map(v => {
							v.created_at = Time(v.created_at)
							return v
						})
						this.newansweredlast.push(...add)
						console.log("最新回答列表", this.newansweredlast)
					} else {
						uni.showLoading({
							title: "没有数据了哦" //为了网络慢，给用户的友好等待提示
						});
						setTimeout(function() {
							uni.hideLoading();
						}, 500);
						this.bootomvalue = '没有数据了哦'
					}

				})
			}
			if (this.headerIndex == 4) {
				this.currentPagefour++
				this.$store.dispatch("remote/query", {
					model: 'article_comment',
					isloading: false,
					where: {
						article_article: {
							_is_null: false
						}
					},
					limit: this.pageSize,
					offset: (this.currentPagefour - 1) * this.pageSize,
					field_string: 'id content score article_article article{id title article_comment{id user{id nickname } }} collect created_at zanlink article_comment_detail{id  content img{url} video{url}}  user{id nickname avatar{url}}',

				}).then(res => {
					if (res.data_list?.length > 0) {
						let add = res.data_list.map(v => {
							v.created_at = Time(v.created_at)
							return v
						})
						add = add.sort((a, b) => {
							return b.zanlink - a.zanlink
						})
						this.popularquestionsCardlist.push(...add)
						console.log("最热回答列表", this.popularquestionsCardlist)
					} else {
						uni.showLoading({
							title: "没有数据了哦" //为了网络慢，给用户的友好等待提示
						});
						setTimeout(function() {
							uni.hideLoading();
						}, 500);
						this.bootomvalue = '没有数据了哦'
					}

				})
			}
			if (this.headerIndex == 5) {
				this.currentPagefive++
				this.$store.dispatch("remote/query", {
					model: 'article',
					isloading: false,
					limit: this.pageSize,
					offset: (this.currentPagefive - 1) * this.pageSize,
					order_by: {
						id: 'desc'
					},
					where: {
						status: {
							_eq: "展示中"
						},
						answer_type: {
							_eq: "公开参与"
						}
					},
					field_string: 'id user_user type heat title content price_cny created_at answer_type status article_detail{id img{url} video{url}} article_visits{visit_times} article_comment{id} user{id nickname avatar{url}}',
				}).then(res => {
					if (res.data_list?.length > 0) {
						console.log('全部提问', res);
						let add = JSON.parse(JSON.stringify(res.data_list))
						this.anylist.push(...add)
					} else {
						uni.showLoading({
							title: "没有数据了哦" //为了网络慢，给用户的友好等待提示
						});
						setTimeout(function() {
							uni.hideLoading();
						}, 500);
						this.bootomvalue = '没有数据了哦'
					}

				})
			}


			// console.log("11111121342354246")

			// if (this.popularquestionsCardlist.length > 20) {

			// } else {
			// 	uni.showLoading({
			// 		title: "加载中" //为了网络慢，给用户的友好等待提示
			// 	});
			// 	setTimeout(function() {
			// 		uni.hideLoading();
			// 	}, 500);
			// 	this.popularquestionsCardlist = [...this.popularquestionsCardlist, ...arr]
			// }

		}
	}
</script>

<style lang="scss">
	page {
		width: 100%;
		background-color: #f4f4f4;
		height: 100vh;
	}

	.popularlogin {
		width: 595rpx;
		height: 370rpx;
		background: #FFFFFF;
		box-sizing: border-box;
		padding: 20rpx 0 40rpx 0;
		border-radius: 15rpx 15rpx 15rpx 15rpx;
		display: flex;
		flex-direction: column;
		align-items: center;

		.popularlogin-text {
			font-size: 32rpx;
			font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: rgba(0, 0, 0, 0.8);
			line-height: 40rpx;
			margin: 12rpx 0 128rpx 0
		}

		.popularlogin-btn {
			display: flex;
			justify-content: space-between;
			width: 100%;
			box-sizing: border-box;
			padding: 0 65rpx;

			.popularlogin-btn-left {
				width: 215rpx;
				height: 70rpx;
				background: #26C789;
				border-radius: 80rpx 80rpx 80rpx 80rpx;
				text-align: center;
				font-size: 24rpx;
				font-family: Alibaba PuHuiTi 2.0-85 Bold, Alibaba PuHuiTi 20;
				font-weight: 700;
				color: #FFFFFF;
				line-height: 70rpx;
			}
		}
	}

	.fontColor {

		padding: 6rpx;
		color: #fff;
		font-size: 20rpx;
		margin: 12rpx 12rpx 12px 4rpx;
		border-radius: 10rpx;
		background-color: #F09500;
	}

	// .colorType{
	// 	width: 100%;
	// 	background-color: #dcdcdc;
	// 	margin-top: 30rpx;
	// 	height: 1px;
	// 	z-index: -1;

	// }
	.questionslist-page {
		width: 100%;
		background-color: #f4f4f4;
		height: 100%;

		.questionslist-page-header {
			width: 100%;
			height: 343rpx;

			.page-header-img {
				// margin-top: -343rpx;
				width: 100%;
				height: 100%;
			}

		}

		.questionslist-page-nav {
			// box-sizing: border-box;
			// padding-left: 27rpx;
			display: flex;
			margin-top: -170rpx;
			// width: 100%;

			.page-nav-left {
				width: 100rpx;
				height: 60rpx;
				background: #F5F6F6;
				border-radius: 15rpx 15rpx 15rpx 15rpx;
				text-align: center;
				font-size: 28rpx;
				font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
				font-weight: 500;
				color: #7A7B7B;
				line-height: 60rpx;
				margin-left: 27rpx;
				margin-right: 20rpx;
			}

			.nav-left-active {
				color: #fff;
				background-color: #F09500;
			}



			.page-nav-right {
				width: 800rpx;
				// flex: 1;
				display: flex;
				overflow: hidden;
				overflow: auto;


				.body-header-left {
					padding: 0 15rpx;
					min-width: 140rpx;
					height: 60rpx;
					// width: 100rpx;
					background-color: #fff;
					z-index: 99;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 28rpx;
					font-weight: 500;
					border-radius: 15rpx;
					color: #7A7B7B;
					margin-right: 20rpx;

					.header-left-img {
						width: 16rpx;
						height: 20rpx;
						margin-right: 10rpx;
					}

					.header-left-img-css {
						width: 13rpx;
						height: 20rpx;
						margin-right: 13rpx;
					}
				}

				.header-left-active {
					color: #fff;
					background-color: #F09500;
				}

			}
		}

		.questionslist-page-sort {
			margin: 25rpx 0;
			box-sizing: border-box;
			padding-left: 27rpx;
			height: 30rpx;
			display: flex;
			align-items: flex-start;

			.page-sort-box-active {
				border-radius: 10rpx;
				border: 1rpx solid #CCCCCC;
				background-color: #fff;
			}

			.page-sort-box {
				display: inline-block;
				font-size: 24rpx;
				font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
				font-weight: 500;
				color: #666666;
				line-height: 30rpx;
				padding: 3rpx 5rpx;
				z-index: 999;


				.sort-box-img {
					width: 32rpx;
					height: 30rpx;
					vertical-align: top;
				}

				.sort-box-list {
					margin-left: 20rpx;
					font-size: 24rpx;
					font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
					font-weight: 500;
					color: #999999;
					line-height: 50rpx;
					margin: 0 10rpx;
				}
			}
		}

		.questionslist-page-content {
			.content-body-midel {
				width: 100%;
				background-color: #fff;
				z-index: 999;
				// margin-top: 20rpx;
				// box-sizing: border-box;
				border-radius: 15rpx;
				opacity: 1;

				.body-midel-content {
					width: 100%;

					padding-bottom: 20rpx;

					.midel-content-text {
						color: #4a4a4a;
						font-size: 30rpx;
						font-weight: 500;
						padding: 20rpx 0 0 20rpx;

						.content-text-img {
							width: 32rpx;
							height: 32rpx;
							margin-left: 30rpx;
							margin-top: 20rpx;
							vertical-align: middle;

						}
					}

					.midel-content-img {
						width: 100%;
						// height: 175rpx;
						margin-top: 15rpx;
						display: flex;

						.content-img-list {
							.content-img-log {
								width: 175rpx;
								height: 175rpx;
								margin: 0 12rpx;
							}

							.content-img-video {
								width: 520rpx;
								height: 210rpx;
							}
						}
					}
				}
			}

			// width: 100%;
			padding: 0 27rpx;

			.page-content-body {
				width: 100%;
				background-color: #fff;
				// height: 200rpx;
				z-index: -1;
				border-radius: 15rpx;
			}

			.page-content-bodytwo {
				width: 100%;
				// background-color: #ffffff;
				// height: 200rpx;
				z-index: -1;
				border-radius: 15rpx;
			}

			.page-content-bodytwotwo {
				width: 100%;
				background-color: #ffffff;
				// height: 200rpx;
				z-index: -1;
				border-radius: 15rpx;
			}
		}

		.questionslist-page-bottom {
			width: 100%;
			height: 100rpx;
			background-color: #f4f4f4;
			text-align: center;
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi 2.0-55 Regular, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #666666;
			line-height: 82rpx;
			position: relative;
			bottom: 0;
		}
	}
</style>